<template>
  <div class="login">
    <div class="loginMain flex">
      <img src="@/assets/loginBg.png" alt="" />
      <div class="loginForm">
        <div class="tabList">密码登录</div>
        <div class="ps-rl">
          <input
            type="text"
            placeholder="请输入登录账号"
            v-model.trim="from.username"
          />
        </div>
        <div class="ps-rl">
          <input
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入登录密码"
            v-model.trim="from.password"
          />
          <img
            src="@/assets/icon/showPassword.png"
            alt=""
            v-if="showPassword"
            @click="showPassword = false"
          />
          <img
            src="@/assets/icon/hidePassword.png"
            alt=""
            v-else
            @click="showPassword = true"
          />
        </div>
        <el-button class="submit" @click="login()">登录</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      from: {
        username: '',
        password: ''
      },
      isChoice: false,
      showPassword: false,
      enterLogin: (e) => {
        if (e.keyCode === 13) {
          // 按下回车后的逻辑
          this.login();
        }
      }
    };
  },
  beforeMount() {
    // if (process.env.NODE_ENV !== 'production') {
    //   this.from = {
    //     username: 'admin',
    //     password: 123456
    //   };
    // }
  },
  mounted() {
    window.addEventListener('keydown', this.enterLogin);
  },
  beforeRouteLeave(to, form, next) {
    window.removeEventListener('keydown', this.enterLogin);
    next();
  },
  methods: {
    login() {
      if (this.from.username === '') {
        this.$message({
          message: '请输入用户名',
          type: 'warning'
        });
        return false;
      }
      if (this.from.password === '') {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        });
        return false;
      }
      let params = {
        userName: this.from.username,
        password: this.encryptByEnDES(this.from.password)
      };
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .postData('adm/adminuser/adminLogin', params)
        .then((data) => {
          loading.close();
          this.$store.commit('setUserInfo', data.resData);
          localStorage.setItem('ldzxUserInfo', JSON.stringify(data.resData));
          this.$router.push({ name: 'home' });
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  position: relative;
  min-height: 100vh;
  .loginMain {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    > img {
      display: block;
      width: 520px;
      height: 564px;
    }
    .loginForm {
      width: 596px;
      height: 564px;
      background: #ffffff;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      padding: 56px 66px 56px 60px;
      .tabList {
        font-size: 28px;
        font-family: 'PingFangSC-Medium', 'PingFang SC';
        font-weight: 500;
        color: #2956bc;
        line-height: 40px;
        margin-bottom: 66px;
      }
      .ps-rl {
        > input {
          display: block;
          width: 100%;
          border: 0;
          font-size: 18px;
          line-height: 54px;
          border-bottom: 1px solid #e8e8e8;
          margin-bottom: 32px;
        }
      }
      .submit {
        width: 100%;
        padding: 0;
        margin-top: 50px;
        font-size: 24px;
        text-align: center;
        color: #ffffff;
        line-height: 50px;
        background: #2956bc;
        box-shadow: 0px 4px 30px 0px rgba(41, 86, 188, 0.2);
        border-radius: 2px;
        cursor: pointer;
      }
    }
  }
  .ps-rl {
    position: relative;
    img {
      width: 16px;
      height: 16px;
      position: absolute;
      display: block;
      bottom: 18px;
      right: 5px;
      cursor: pointer;
    }
  }
}
</style>